<template>
  <div ref='ec' :style="{height:height,width:width}"></div>
</template>

<script>
import echarts from "echarts";
import debounce from '@/utils/debounce'

export default {
  props: {
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    },
    iSfullscreen: {
      type: Boolean,
      default: false
    },
    tree_dialog: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'line'
    },
    selected: {
      type: Object,
      default: null
    },
    zoom: {
      type: Boolean,
      default: true
    },
    linedata: '',
    visualMap: {
      type: Number,
      default: 0
    },
    unit: {
      type: String,
      default: ''
    },
    ecdata: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      color: ['#CC0000', '#0066CC', '#00CCCC', '#990066', '#ea9914', '#e7600e', '#006633', '#ADCB13', '#0099FF', '#FFCC33', '#D39188', '#5c2a69', '#5DB85E', '#C40082', '#FF3703', '#D5353F', '#B699BD', '#a02024', '#dd6a24', '#cc3736'],
      chart: null
    };
  },
  computed: {
    origin() {
      return this.ecdata;
    },
    opt() {

      let that = this;
      let opt = {
        backgroundColor: "#FFf",
        color: this.color,
        // tooltip: {
        //   trigger: 'item',
        //   triggerOn: 'mousemove'
        // },
        toolbox: {
          right: 80,
          top: 20,
          show: true,
          iconStyle: {
            borderColor: '#333'
          },
          emphasis: {
            iconStyle: {
              borderColor: 'rgba(7, 128, 237, 1)'
            },
          },
          feature: {
            restore: {},
            saveAsImage: {}
          }
        },
        series: [
          {
            roam: true,
            type: 'tree',
            data: that.origin,
            symbolSize: 20,
            symbolKeepAspect: false,
            // expandAndCollapse:false,
            symbolOffset: [0, 0],
            initialTreeDepth: 1,
            symbol: 'emptyCircle',
            orient: 'vertical',
            top: 150,
            left: 50,
            right: 50,
            bottom: 150,
            itemStyle: {
              color: 'rgba(7, 128, 237, 1)',
              borderColor: '#ccc'
            },
            label: {
              normal: {
                offset: [0, -50],
                // position: 'center',
                // verticalAlign: 'middle',
                align: 'center',
                backgroundColor: 'rgba(7, 128, 237, 1)',
                padding: [8, 15],
                color: '#fff',
                fontSize: 14,
                borderRadius: 10,
                formatter(p) {
                  console.log(p)
                  return `${p.name}\n${p.value ? p.value + 'kWh' : ''}${p.data.rate&&p.data.rate!=='-1' ?'\n占比：'+p.data.rate+'%' : ''}`
                },

                // formatter: [
                //   '{b|{b}}', '{c|{c}}'
                // ].join('\n'),
                // rich: {
                //   c: {
                //     color: '#fff',
                //   }
                // }
              }
            },
            leaves: {
              label: {
                normal: {
                  offset: [0, -50],
                  // position: 'center',
                  // verticalAlign: 'middle',
                  align: 'center',
                  backgroundColor: '#00afc3',
                  padding: [8, 15],
                  color: '#fff',
                  fontSize: 14,
                  borderRadius: 10,
                  formatter(p) {
                    console.log(p)
                    return `${p.name}\n${p.value ? p.value + 'kWh' : ''}${p.data.rate ? p.data.rate : ''}`
                  },

                  // formatter: [
                  //   '{b|{b}}', '{c|{c}}'
                  // ].join('\n'),
                  // rich: {
                  //   c: {
                  //     color: '#fff',
                  //   }
                  // }
                }
              }
            },
            // expandAndCollapse: true,
            // animationDuration: 550,
            // animationDurationUpdate: 750
          }
        ]
      };
      return opt;
    }
  },
  watch: {
    origin() {
      this.chart.setOption(this.opt, true);
    },
    iSfullscreen() {
      this.chart.resize()
      this.chart.dispatchAction({
        type: 'restore'
      })
    },
    tree_dialog() {
      this.chart.dispatchAction({
        type: 'restore'
      })
    }
  },
  mounted() {
    this.initChart();
    this.__resizeHanlder = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 1)
    window.addEventListener('resize', this.__resizeHanlder)
    // const mian = document.getElementById('mian')
    // mian.addEventListener('transitionend', this.__resizeHanlder)
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    // window.removeEventListener('resize', this.__resizeHanlder)
    // const mian = document.getElementById('mian')
    // mian.removeEventListener('transitionend', this.__resizeHanlder)
    this.chart.dispose()
    this.chart = null
  },
  created() {
    // this.r_color = this.rgba_color(this.color);
  },
  methods: {

    initChart() {
      this.chart = echarts.init(this.$refs.ec);
      this.chart.setOption(this.opt);
    },
  }

};
</script>
